<template>
  <div class="aside">
    <div class="asideTop">
      <img src="~assets/imgs/userAside.png" />
      <p>个人中心</p>
    </div>
    <el-menu :collapse="collapse"
      :router="true"
      :default-active="asideActive">
      <template v-for="(items, index) in Routers">
        <el-submenu v-if="items.children"
          :index="items.name"
          :key="index">
          <template slot="title">
            <i :class="items.meta.icon"></i>
            <span>{{ items.meta.name }}</span>
          </template>
          <span v-for="(child, i) in items.children"
            :key="i">
            <el-menu-item :index="child.path">{{
              child.meta.name
            }}</el-menu-item>
          </span>
        </el-submenu>
        <template v-else>
          <el-menu-item :index="items.path"
            :key="items.path">
            <i :class="items.meta.icon"></i>
            <span slot="title">{{ items.meta.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
    <a class="task_btn"
      @click="handleClickTask">任务平台</a>
  </div>
</template>
<script>
import { routes } from "@/router/index.js";
import { getToken } from "@/utils/auth";
export default {
  name: "Aside",
  data() {
    return {
      token: "",
      taskUrl: "",
      asideActive: null
    };
  },
  methods: {
    getPath() {
      let path = this.$route.path;
      this.asideActive = "/logs/logon";
      console.log("asideActive", this.asideActive);
    },
    handleClickTask() {
      if (getToken()) {
        this.taskUrl = `http://128.196.150.85:1350/renwu?token=${this.token}`;
        window.open(this.taskUrl);
      } else if (this.token && !getToken()) {
        this.taskUrl = `http://128.196.150.85:1350/renwu?token=${this.token}`;
        window.open(this.taskUrl);
      } else {
        this.$message({
          type: "warning",
          message: "请登录"
        });
        let dev = /^dev.+$/.test(window.document.domain) ? "dev." : "";
        let offline = /^offline.+$/.test(window.document.domain)
          ? "offline."
          : "";
        let prefix = offline != "" ? offline : dev;
        //登录是85.
        let login_ip = this.$store.state.login_ip;

        window.location = `http://${prefix}${login_ip}/weblogin/password?referer=${location.origin}/#/logs/logon`;
        this.$message({
          type: "success",
          message: "正在跳转登录页!"
        });
      }
    }
  },
  computed: {
    Routers() {
      const routers = routes;
      console.log("routers", routers);
      function serilize(temparr = [], routers) {
        for (let i = 0; i < routers.length; i++) {
          if (routers[i].meta && routers[i].meta.isShow) {
            temparr.push(routers[i]);
          }
          if (routers[i].children && routers[i].children.length) {
            serilize(temparr, routers[i].children);
          }
        }
        return temparr;
      }
      return serilize([], routers);
    }
  },
  mounted() {
    this.getPath();
    document.querySelectorAll("li")[0].style.paddingLeft = "0.116667rem";
    document.querySelectorAll("li")[1].style.paddingLeft = "0.116667rem";
  },
  created() {
    let params = window.location.search;
    if (params) {
      this.token = params.replace(/^.+token=([^&=]+).*$/, "$1").toString();
    } else if (getToken()) {
      this.token = getToken();
    }
  },
  watch: {
    $route() {
      this.getPath();
    }
  },
  props: {
    collapse: Boolean
  }
};
</script>
<style lang="scss" scoped>
.asideTop {
  height: 80px;
  text-align: center;
  padding: 20px 15px 0.25rem 10px;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #ffffff;
  line-height: 30px;
}
.task_btn {
  height: 56px;
  line-height: 56px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  width: 0.94rem;
  display: inline-block;
  padding-left: 0.1922rem;
  box-sizing: border-box;
}
.task_btn:hover {
  background-color: rgba(0, 0, 0, 0.498039215686275);
  border-style: solid;
  border-color: rgba(24, 145, 255, 1);
  border-left: 0 px;
  border-top: 0 px;
  border-bottom: 0 px;
  border-radius: 0 px;
  border-top-right-radius: 0 px;
  border-bottom-right-radius: 0 px;
  border-right: 3px solid #409eff;
}
</style>
